<template>
    <div class="w-100" style="height: 100%">
   <div
   id="ghxmqy"
     class="w-100"
     v-if="planEchartsData"
     style="height: 100%; position: relative"
   ></div>
 </div>
</template>

<script setup lang='ts'>
import * as echarts from "echarts";
const props = defineProps({
planEchartsData: {
 type: Array,
 default: () => [],
},

});
let  option = {
grid: {
   left: '5%',
   right: '15%',
   bottom: '5%',
   top: '10%',
   containLabel: true
},
tooltip: {
   trigger: 'axis',
   axisPointer: {
       type: 'none'
   },
   formatter: function (params:any) {
       return params[0].name + '<br/>' +
           "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
           params[0].seriesName + ' : ' + params[0].value + ''
   }
},
xAxis: {
   show: false,
   type: 'value',
   nameTextStyle: {
 color: "#DEDEDE",
 fontSize: 20,
 padding: 10,
},
},
yAxis: [{
   type: 'category',
   inverse: true,
   axisLabel: {
       show: true,
       textStyle: {
         fontSize: 20,
         color: "#667A8E",
       },
   },
   splitLine: {
       show: false
   },
   axisTick: {
       show: false
   },
   axisLine: {
       show: false
   },
   data: props.planEchartsData.map((item: any) => item.name),
}],
series: [{
   name: '数量',
   type: 'bar',
   zlevel: 1,
   itemStyle: {
       normal: {
           barBorderRadius: 0,
           color: {
               type: 'linear',
               colorStops: [{
                   offset: 0,
                   color: "rgba(255, 255, 255, 0)",
               },
               {
                   offset: 1,
                   color: "rgba(0, 255, 233, 1)",
               },
               ],
           },

       },
   },
   // barWidth: 20,
   emphasis: {
       disabled: true,
       focus: 'none'
   },
   data: props.planEchartsData.map((item: any) => item.value),
},
// {
//     name: '背景',
//     type: 'bar',
//     barWidth: 20,
//     barGap: '-100%',
//     data: props.planEchartsData.map((item: any) => item.value),
//     emphasis: {
//         disabled: true,
//         focus: 'none'
//     },
//     itemStyle: {
//         normal: {
//             color: 'rgba(45, 243, 226, 0.10)',
//             barBorderRadius: 0,

//         }
//     },
// },
]
};
let myChart:any
onMounted(()=>{

myChart = echarts.init(
 document.getElementById('ghxmqy') as HTMLElement
);
myChart.setOption(option)
})
onBeforeUnmount(() => {
// 销毁 ECharts 实例
if (myChart) {
myChart.dispose();
}
});
</script>

<style>

</style>